中国文化网站建设策划书,免费做ppt的网站,东莞百度推广排名,定制网站开发方案ppt科普#xff1a; 秋云图表库#xff0c;包含二种配置属性对应二种js配置文件。 一种是 #xff1a;echarts.js,一种是 #xff1a; ucharts。 二者的配置属性不一样#xff01; ucharts和echarts对比
ucharts和echarts都是用于数据可视化的开源JavaScript库#xff0c;它…科普 秋云图表库包含二种配置属性对应二种js配置文件。 一种是 echarts.js,一种是 ucharts。 二者的配置属性不一样 ucharts和echarts对比
ucharts和echarts都是用于数据可视化的开源JavaScript库它们有一些相似之处也有一些不同之处。
相似之处
都支持多种图表类型和交互式操作。都能够使用简单、易懂的API来生成图表。都具有良好的文档和社区支持。
不同之处
ucharts是面向移动端的数据可视化库具有更轻量、更快速的特点适合于移动设备上的数据可视化而echarts则更适合于PC端和大屏幕的数据可视化。ucharts依赖于canvas绘制图表echarts则利用SVG技术绘制图表因此echarts的图表在视觉效果上更加细致、清晰而ucharts则更加流畅。ucharts整体风格较为简单echarts在视觉设计上更加花哨。 qiun-data-charts 配置echarts
增加 主要是 eopts 配置 qiun-data-charts :chartDatachartDataPie :echartsH5true :echartsApptrue backgroundnone :eoptseopts / eopts: {color: [#3287f7, #ffb87c, #7cdeb9, #f26f84, #6fccf0, #a16af0],legend: {show: false}},chartDataPie: {series: [{type: pie,radius: 55%,label: {normal: {formatter: {b}:\n{c}\n{d}%, //百分比之后换行显示文字color: #555},color: #555},data: [{name:一班,value:50},{name:二班,value:30},{name:三班,value:20},{name:四班,value:18},{name:五班,value:8}]}]},
qiun-data-charts 配置echarts
增加 主要是 opts 配置
templateview classcharts-boxview classchart-title洗涤费趋势/viewqiun-data-chartstypecolumn:optsopts:chartDatachartData//view
/templatescript
export default {data() {return {chartData: {},// opts:opts uCharts配置opts: {xAxis: {disableGrid: true},yAxis: {disableGrid: true,data: [{min: 0}]},extra: {column: {type: group}}}};},onReady() {this.getServerData();},methods: {getServerData() {setTimeout(() {//模拟服务器返回数据如果数据格式和标准格式不同需自行按下面的格式拼接let res {categories: [2016, 2017, 2018, 2019, 2020, 2021],series: [{name: 目标值,data: [35, 36, 31, 33, 13, 34]}]};this.chartData JSON.parse(JSON.stringify(res));}, 500);},}
};
/scriptstyle scoped
/* 请根据实际需求修改父元素尺寸组件自动识别宽高 */
.charts-box {width: 100%;height: 300px;border-radius: 10px;border: 1rpx solid black;padding: 15rpx;background-color: #fff;
}
.chartsview{/*border-radius: 15rpx;*//*background-color: #fff;*/
}.chart-title {text-align: center;background-color: #bfc;
}
/style 将前面的epots改成opts即可。Easy.
