[ js] - 使用echarts绘制图表

随便聊聊~~
最近接了新的项目需求,是有关于周报的事情,所以涉及到了各种柱状图,饼图,散点图以及地图等等。即便之前也做过图表,但是好多的配置项总是算查文档才能搞明白,所以这次趁着有机会,就在这里小小的总结一下遇到的问题吧。

1、基本配置项

饼图:
var optionPhase = {
      // 标题
      title: {
          text: '上周(' + _this.bannerData.startTimeMd + '-'+ 
                    _this.bannerData.endTimeMd + ')'+ 
                    _this.industyName + '领域获投轮次分布',
       // 这里标题中加入了变量 展现形式: 上周(7.29-8.4)金融领域获投轮次分布
         x:'center'  // 标题居中显示
      },
    // 提示框
      tooltip : {
           trigger: 'item',
           formatter: "{a} 
{b} : {c} ({d}%)" // 提示框内容 }, // 工具内容 toolbox: { show: true, feature: { saveAsImage: {} // 保存图片 } }, series : [ { name: '轮次', type: 'pie', // 饼状图 radius : '55%', center: ['50%', '60%'], data: dataNonull, itemStyle: { // 移入展示样式 emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, // 正常展示样式 normal:{ label:{ show: true, formatter: '{b} {d}%', textStyle: { color: '#000' } }, // 可以自定义展示颜色 color: function (params) { var colorList = [ '#0076D0', '#43A8E0', '#22BA6F', '#41CC5D', '#FFA300', '#F2CE00', '#FF6000', '#FF7020', '#A6A6A6', '#D9D9D9', '#c1beff', '#c2e7ff', '#fabdff' ]; return colorList[params.dataIndex] }, labelLine :{show:true} } } ] };
柱状图
optionIndusty = {
     title: {
         text: '上周(7.1-7.7)国内各领域获投数量',
         x:'center'
     },
     color: ['#0076D0'],
     tooltip : {
         trigger: 'axis',
         axisPointer : {   // 坐标轴指示器,坐标轴触发有效
             type : 'shadow'  // 默认为直线,可选为:'line' | 'shadow'
         }
     },
     xAxis : [
         {
             type : 'category',
             data : ['企业服务',  '电商', '消费生活', '文娱传媒', '教育', '医疗健康', '非MT', '汽车金融', '无人机', '体育'],
             axisTick: { //坐标轴刻度相关设置
                 alignWithLabel: true
             },
             axisLabel:{   //坐标轴刻度标签的相关设置
                     interval:0,  
                     formatter:function(value)  
                     {  
                         return value.split("").join("\n");  
                     },
                     // rotate:-90,//倾斜度 -90 至 90 默认为0  
                     margin:10, 
                    textStyle:{  
                         color:"#000"  
                     }  
                 },
         }
     ],
     yAxis : [
         {
             type : 'value',
             splitLine: { // y轴分割线
                 show: false
             }
         }
     ],
     series : [
         {
             name:'融资数量',
             type:'bar',
             barWidth: 20,
             data:[10, 33, 4, 8, 15, 25, 52, 39, 30, 20],
             itemStyle: {
                 normal:{  // 柱状图上的数值显示
                     label:{
                         show: true,
                         position: 'top',
                         textStyle: {
                             color: '#000'
                         }
                 }
             }
         }
     ]
 };
左右双向柱状图(大多其实都在处理数据。。。)
var nameArr = ['百万级', '千万级', '亿元级'];
var nameArrTemp = [];
var valueArrMTemp = [];
var valueArrRTemp = [];
var valueArrM = [];
var valueArrR = [];
var wplValue = ''; 
axios.get(接口地址, {params: sendData})
                .then(function (response) {
                    var dataNonull = response.data.data; 
                    for(var i = 0; i < dataNonull.length;i++) {
                        if (dataNonull[i].name.indexOf('美元') > -1) {
                            valueArrM.push(dataNonull[i].value);
                        } else if (dataNonull[i].name.indexOf('人民币') > -1) {
                            valueArrR.push(dataNonull[i].value);
                        } else if(dataNonull[i].name.indexOf('未披露') > -1) {
                            wplValue = dataNonull[i].value;
                        }
                    }
                    valueArrM.reverse();
                    valueArrR.reverse();
                    for(var j = 0; j < nameArr.length; j++) {
                        if(valueArrM[j] == 0 && valueArrR[j] == 0) {
                        } else {
                            nameArrTemp.push(nameArr[j]);
                            valueArrMTemp.push(-valueArrM[j]);
                            valueArrRTemp.push(valueArrR[j]);
                        }
                    }
                    var amountChart = echarts.init(document.getElementById('amountChart'));
                    var optionAmount = {
                        title: {
                            text: '上周(' + _this.bannerData.startTimeMd + '-'+ _this.bannerData.endTimeMd + ')' + _this.industyName + '领域获投金额分布',
                            x:'center',
                            subtext: '未披露的融资数量:' + wplValue,
                            subtextStyle: {
                                fontSize: '15',
                                color: '#555'
                            }
                        },
                        legend: {
                            data:[ '美元', '人民币'],
                            bottom: 0
                        },
                        toolbox: {  // 工具内容
                            show: true,
                            feature: {
                                saveAsImage: {}   // 保存图片
  }
                        },
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                            },
                            formatter: function (params, ticket, callback) {
                                var res = '融资数量' ;
                                // var res = params[0].name ;
                                for (var i = 0, l = params.length; i < l; i++) {
                                    res += '
' + params[i].name + params[i].seriesName + ' : ' + Math.abs(params[i].value) ; } setTimeout(function () { // 仅为了模拟异步回调 callback(ticket, res); }, 500) return 'loading...'; } }, grid: { left: '3%', right: '4%', bottom: '10%', // 图表距离 containLabel: true }, xAxis: { show: true, type: 'value', axisTick: { //坐标轴刻度相关设置 show: false }, axisLabel : { formatter: function (value){return Math.abs(value);} //坐标轴显示的数值都取绝对值 } }, yAxis: { type: 'category', axisTick: { //坐标轴刻度相关设置 show: false }, data: nameArrTemp }, series: [ { name: '美元', type: 'bar', barWidth: 15, stack: '总量', itemStyle: { normal:{ label:{ show: true, position: 'left', textStyle: { color: '#000' }, formatter:function(v){return Math.abs(v.data)} } } }, data: valueArrMTemp }, { name: '人民币', type: 'bar', barWidth: 15, stack: '总量', // 数据堆叠,同类目轴上系列配置相同的stack值可以堆叠放置 itemStyle: { normal:{ label:{ show: true, position: 'right', textStyle: { color: '#000' } }, } }, data: valueArrRTemp } ] }; window.onresize = amountChart.resize; amountChart.setOption(optionAmount); })

图表如下:

[ js] - 使用echarts绘制图表_第1张图片
image.png

2、常用/遇到过的问题

1、提示框组件
tooltip : {
     trigger: 'axis', // 'item'数据项图形触发,散点图,饼图等无类目轴的图表中使用。'axis'坐标轴触发,柱状图,折线图等会使用类目轴的图表中使用。
     axisPointer : {            // 坐标轴指示器,坐标轴触发有效
          type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
     }
},

[图片上传失败...(image-43c46d-1565666494102)]

trigger: 'item',
formatter: "{a} 
{b} : {c} ({d}%)"

[图片上传失败...(image-6b6e9d-1565666494102)]

2、图例组件
legend: {
    data: ['上上周',  '上周'],
   orient: 'vertical',  // 垂直显示 ,默认水平
    bottom: 0  // 显示再底部  left:'left' 显示在左上部
}
3、工具
toolbox: {  // 工具内容
  show: true,
  orient: 'vertical', // 垂直
  left: 'right',  // 右部
  top: 'center'  // 上下居中
  feature: {
     dataView: { readOnly: false},
     restore: {},
     saveAsImage: {}   // 保存图片
  }
}

[图片上传失败...(image-817ae-1565666494102)]

4、坐标轴横坐标标签垂直显示
                  xAxis : [
                            {
                                type : 'category',
                                data :  nameArr,
                                axisTick: { //坐标轴刻度相关设置
                                    show: false
                                }, 
                                axisLabel:{   //坐标轴刻度标签的相关设置
                                    interval:0,  
                                    formatter:function(value)  
                                    {  
                                       return value.split("").join("\n");  
                                    },
                                    // rotate:-90,//倾斜度 -90 至 90 默认为0  
                                    margin:10,  
                                    textStyle:{  
                                        color:"#000"  
                                    }  
                                }, 
                            }
                        ],

[图片上传失败...(image-68fa90-1565666494102)]

5、图表边距
                       grid: {
                           left: '3%',
                           right: '4%',
                           bottom: '10%', // 图表距离
                           containLabel: true
                       },

你可能感兴趣的:([ js] - 使用echarts绘制图表)