重庆网上商城网站建设公司/2023年10月疫情还会严重吗

项目使用Echarts图表，感觉还不错，记录下使用心得，做为备份和共享。

说明：

1.本文使用的echarts版本为3.2.3。

2.本文只涉及echarts折线图、柱状图、饼图。

3.echats.js官方下载地址：http://echarts.baidu.com/download.html

4.echats各配置项说明请查看官方文档：http://echarts.baidu.com/option.html#title

正文：

1.如何创建echarts图例？

1.1.创建html元素，注意：width和height必须要设定，否则无图。

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="chart" style="width: 600px; height: 400px;"></div>

1.2.javascript绘制图形(柱状图)

1.2.1 初始化，注意：要用原生的javascript函数获取dom对象，jquery函数$("#chart")获取的是jquery对象，无效。

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));

1.2.2 参数设定

var option = {title: {text: '服务渠道收件堆叠图',//大标题subtext:'数据来自...'//副标题},tooltip: {//提示框组件trigger: 'axis',           //触发类型,axis-坐标轴触发，主要在柱状图，折线图axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},legend: {//图例data: []//图例的数据数组},grid: {//直角坐标系内绘图网格left: '3%',          //grid 组件离容器左侧的距离。right: '4%',bottom: '3%',containLabel: true  //grid 区域是否包含坐标轴的刻度标签},xAxis: [//直角坐标系 grid 中的 x 轴{type: 'category', //坐标轴类型:'category' 类目轴，适用于离散的类目数据data: []         //x轴刻度}],yAxis: [{type: 'value'   //数值轴}],series: [{name: '渠道1收件',  //系列名称，用于tooltip的显示，legend 的图例筛选type: 'bar',      //bar-柱状图stack: '渠道',     //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。barMaxWidth: '50%',//柱条的最大宽度，不设时自适应data: [],},{name: '渠道2收件',type: 'bar',stack: '渠道',data: [],}]};

1.2.3 参数绑定

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

1.2.4 异步加载

   // 异步加载// 显示loading 的动画来提示用户数据正在加载myChart.showLoading();$.get('stack_bar.json').done(function (data) {// 隐藏loading 的动画myChart.hideLoading();//填充图表数据myChart.setOption({xAxis: {data: data.x},series: [{// 根据index或name,对应到相应的系列// yAxisIndex:0,name: '渠道1收件',data: data.y1},{// yAxisIndex:1,name: '渠道2收件',data: data.y2}});

1.2.5 附stack_bar.json

{
"x":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
"y1":[0,0,0,0,0,0,0,0,0,18,0,0],
"y2":[0,0,0,0,0,0,0,0,0,0,0,0],
"y3":[0,0,0,0,0,0,0,0,0,0,0,0],
"y4":[0,0,0,0,0,0,0,0,0,18,0,0]
}

2.添加效果

2.1 显示数据值

2.1.1 折线图、柱状图：option-series-label属性

series: [{name: '渠道1收件量',type: 'bar',stack: '渠道',barMaxWidth: '50%',data: [],label: {normal: {show: true,           //显示数据值position: 'insideTop',//图形上方}}},

2.1.2 饼图 option-itemStyle-label属性

itemStyle: {normal: {label: {show: true,formatter: '{b} : {c} ({d}%)'},labelLine: {show: true}}
}

2.2 柱状堆叠图显示值重叠 option-series-label-formatter属性

label: {normal: {show: true,           //显示数据值position: 'insideTop',//图形上方formatter: function (params) {return labelFilter(params);}}
}//echarts ：label过滤显示 value=0不显示
function labelFilter(params) {if (params.value && params.value != 0) {return params.value;} else {return false;}
}

2.3 改变图例系列颜色 option-color属性

option = {
//依次循环从该列表中取颜色作为系列颜色
//默认颜色方案:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',
//           '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']color: ['#c23531', '#4134DB', '#3398DB'],tooltip: {.....}}
}

2.4 1事件

2.4.1 click事件

myChart.on('click', function (params) {/* console.info(params.name);console.info(params.data);*///...your function$j.get('url').done(function (data) {...your syn function});});

2.5 不同坐标轴多个网格  option-grid属性

        // 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var dataAll = [[ [ 10.0, 8.04 ], [ 8.0, 6.95 ], [ 13.0, 7.58 ], [ 9.0, 8.81 ],[ 11.0, 8.33 ], [ 14.0, 9.96 ], [ 6.0, 7.24 ],[ 4.0, 4.26 ], [ 12.0, 10.84 ], [ 7.0, 4.82 ],[ 5.0, 5.68 ] ],[ [ 10.0, 9.14 ], [ 8.0, 8.14 ], [ 13.0, 8.74 ], [ 9.0, 8.77 ],[ 11.0, 9.26 ], [ 14.0, 8.10 ], [ 6.0, 6.13 ],[ 4.0, 3.10 ], [ 12.0, 9.13 ], [ 7.0, 7.26 ],[ 5.0, 4.74 ] ],[ [ 10.0, 7.46 ], [ 8.0, 6.77 ], [ 13.0, 12.74 ],[ 9.0, 7.11 ], [ 11.0, 7.81 ], [ 14.0, 8.84 ],[ 6.0, 6.08 ], [ 4.0, 5.39 ], [ 12.0, 8.15 ],[ 7.0, 6.42 ], [ 5.0, 5.73 ] ],[ [ 8.0, 6.58 ], [ 8.0, 5.76 ], [ 8.0, 7.71 ], [ 8.0, 8.84 ],[ 8.0, 8.47 ], [ 8.0, 7.04 ], [ 8.0, 5.25 ],[ 19.0, 12.50 ], [ 8.0, 5.56 ], [ 8.0, 7.91 ],[ 8.0, 6.89 ] ] ];var markLineOpt = {animation : false,label : {normal : {formatter : 'y = 0.5 * x + 3',textStyle : {align : 'right'}}},lineStyle : {normal : {type : 'solid'}},tooltip : {formatter : 'y = 0.5 * x + 3'},data : [ [ {coord : [ 0, 3 ],symbol : 'none'}, {coord : [ 20, 13 ],symbol : 'none'} ] ]};// 指定图表的配置项和数据option = {title : {text : 'Anscombe\'s quartet',x : 'center',y : 0},//注意这里将图表分成4了块区域 1-[x,y] 2-[x,y2] 3-[x2,y] 4[x2,y2]//只不过能用的只有1-[x,y] 4[x2,y2]grid : [ {x : '7%',y : '7%',width : '38%',height : '38%'}, {x2 : '7%',y2 : '7%',width : '38%',height : '38%'}],tooltip : {formatter : 'Group {a}: ({c})'},xAxis : [ {gridIndex : 0, //从0开始计数min : 0,max : 20}, {gridIndex : 1,min : 0,max : 20} ],yAxis : [ {gridIndex : 0,min : 0,max : 15}, {gridIndex : 1,min : 0,max : 15}],series : [ {name : 'I',type : 'scatter',xAxisIndex : 0,yAxisIndex : 0,data : dataAll[0],markLine : markLineOpt}, {name : 'II',type : 'scatter',xAxisIndex : 1,yAxisIndex : 1,data : dataAll[1],markLine : markLineOpt} ]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

 

未完，待续