Echarts使用记录

作者: 夏日清风_期待 | 来源:发表于2018-05-30 18:04 被阅读0次

vue2使用vue-echarts报错记录
Echarts使用记录
Echarts案例
Echarts使用经验记录
【Echarts】配置使用记录
ECharts - 数据图表的使用
分享学习：小程序使用Echarts的方法
echarts—echarts的简单应用
echarts 自定义仪表盘
今日知识汇总

1.png

这段时间一直在做数据可视化（PC和移动端的），使用的图表是百度的Echarts，遇到一些问题，在这里记录一下。

首先还是放下官网地址：http://echarts.baidu.com/index.html

PC端：

1.通过官网API教程入门，这是必不可少的。按照指示进到下载页面

2.png

使用方法也是通过script标签引入，结果报错：echarts is not defined，当时自己下载的是常用版本，然后换成了精简版、压缩版，都报错，一直到换成完整版才解决，百度了一下，找到了一篇解释的文章https://www.cnblogs.com/nununu/p/7839813.html，是版本的问题！对于压缩版的echarts2.2.7及以上版本，是包含了esl的，所以直接像官网一样<script src="echarts.min.js"></script>引入到页面即可，但是如果是没有压缩的版本，就需要另外引入esl.js才可以使用。

2.设置环形图表，中间显示总数

4.png

通过设置图表的title，并设置位置来实现

title: {
            text: '总故障',
            textStyle:{
              color:'#8E8E8E',
              fontSize:15,
            },
            subtext: '20000.00次',
            subtextStyle:{
              color:'#333',
              fontSize:20,
            },
            x: 'center',
            y: 'center',
          },

3.设置环形数据间隔，通过设置`series`中的itemStyle来实现

series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              //圆心偏移
//              center: ['40%', '50%'],
              avoidLabelOverlap: false,
//              selectedMode: 'single',
              itemStyle: {
                normal: {
                  //数据间隔
                  borderColor: "#FFFFFF",
                  borderWidth: 2,
                }
              },
}
······

移动端： 3.png

因为移动端通过npm安装的，所以没有遇到PC端引入的问题。使用的时候通过设置为vue对象的原型就好

import Vue from 'vue'
import echarts from 'echarts'
import MintUI from 'mint-ui'
// import 'mint-ui/lib/style.css'
import App from './App'

Vue.use(MintUI);
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
});

let myChart = this.$echarts.init(document.getElementById('myChart'));
myChart.setOption({});

1.设置图表的宽高，必须在dom元素上通过行内元素设置才有效，通过class或者id设置均无效

<div id="myChart4" :style="{width: '100%', height: '300px',marginTop: '1rem'}"></div>

2.图表的Y轴标数过大时会超出容器，通过设置`grid`解决，具体代码

grid: {
                left: '0%',  //距离左边的距离
                right: '0%', //距离右边的距离
                bottom: '3%', //距离底部的距离
                containLabel: true //用于『防止标签溢出』的场景
            },

3.图表不会随宽度变化而改变，通过重新设定图表宽度解决

        let revenueChart1 = document.getElementById('revenueChart');

        //自适应宽
    let myChartContainer = function () {
              revenueChart1.style.width = window.innerWidth + 'px';
        };
      //生成图表前调用
      myChartContainer();
      //绘制图表
      let revenueChart = this.$echarts.init(revenueChart1);
      revenueChart.setOption({});

        //浏览器大小改变时重置大小
    window.onresize = function () {
           myChartContainer();
           revenueChart.resize();
        };

目前未解决的问题：

1.折线图横向分割线没办法设置成虚线，如图

5.png

按照API的说明，设置了Y轴上的splitLine的type，但是无效，不知道是不是自己写的不对，目前还在找解决方法。

yAxis: {
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: true,
                    color:'#ccc',
                    width:1,
                    type: 'dashed',
                },
                type: 'value',
},

另外吐槽一句，感觉Echarts的API说明很多东西解释的太官方了，不太容易懂（个人观点，不喜勿喷）。项目还没做完，如遇新问题会继续补充。

----------END-------------

补充1：环形图表因数据值太小导致影响交互

补充1-1
添加minAngle设置环形块的最小宽度，从而使指示线不会重叠在一起

series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。
                minAngle:'5',
                itemStyle: {
                    normal: {
                        //数据间隔
                        borderColor: "#FFFFFF",
                        borderWidth: 2,
                    }
                },
······

补充1-2

补充2:改变数据的排序方式

在data数组后面加上sort(function (a, b) { return a.value - b.value; })排序就可以了，根据需要改变a-b还是b-a

补充2-1.png

data:[
                {value:49, name:'直接访问'},
                {value:48, name:'邮件营销'},
                {value:1, name:'联盟广告'},
                {value:1, name:'视频广告'},
                {value:1, name:'搜索引擎'}
            ].sort(function (a, b) { return a.value - b.value; }),

补充2-2.png

补充2:看到了一篇比较实用的echarts文章，放在这里，有遇到相关问题的可以去看看# ECharts对象的数据实例化方法汇总以及注意事项

补充3：tooltip过宽导致超出屏幕并且无法显示数据

补充3-1.png

在tooltip里设置extraCssText（额外附加到浮层的 css 样式）即可

tooltip: {
            show:true,
            trigger: 'axis',
            extraCssText:'width:120px;height:80px;background:rgba(0,0,0,0.6);',
        },

补充3-2.png

补充4：柱状图或者折线图坐标轴刻度设置为虚线---解决了之前留下的问题

只需要在yAxis中设置标线

yAxis: {
    type: 'value',
    name:'人数（个）',
    splitLine:{
    show:true,
       lineStyle:{
         type:'dashed'
      }
   }
},

补充4-1.png

补充5:echarts的叠堆折线图数据出现坐标和值对不上的问题

![补充5-2.png](https://img.haomeiwen.com/i5075443/9b5700ff429d41b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

原因：多条折线图时，如果stack属性都是一样的，就会出现Y轴叠加的问题
原代码

series: [
              {
                    name: 'PV',
                    type: 'line',
                    symbol: 'circle',//折线点设置为实心点
                    symbolSize: 6,   //折线点的大小
                    stack: '总量',
                    data: seriesData.pv_line_data
                },
                {
                    name: 'UV',
                    type: 'line',
                    symbol: 'circle',//折线点设置为实心点
                    symbolSize: 6,   //折线点的大小
                    stack: '总量',
                    data: seriesData.uv_line_data
                }
            ]

解决：将stack值修改或直接去掉就好了，做法看项目需要

series: [
              {
                    name: 'PV',
                    type: 'line',
                    symbol: 'circle',//折线点设置为实心点
                    symbolSize: 6,   //折线点的大小
                    //stack: '总量',
                    data: seriesData.pv_line_data
                },
                {
                    name: 'UV',
                    type: 'line',
                    symbol: 'circle',//折线点设置为实心点
                    symbolSize: 6,   //折线点的大小
                    //stack: '总量',
                    data: seriesData.uv_line_data
                }
            ]

补充5-2.png

补充6:饼图或仪表盘偏上或偏下，设置`grid`无效

解决：在series中设置center属性

补充6-1.png

原代码：

 series: [
            {
                name: '昨日环比增长率',
                type: 'gauge',
                min: -100, // 最小值
                max: 100, // 最大值
                radius: '100%',
                startAngle: 205,
                endAngle: -25,
                pointer: { // 指针设置
                    length: '60%',
                    width: 6
                },
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.5, '#FF0076'], [1, '#0075FE']],
                        width: 20
                    }
                },
                splitLine: { // 分割线样式（及10、20等长线样式）
                    length : 12
                },
                axisTick: { // 刻度线样式（及短线样式）
                    length : 5
                },
                axisLabel: { // 文字样式（及“10”、“20”等文字样式）
                    color : "#fff",
                    distance : 10 // 文字离表盘的距离
                },
                detail: {
                    formatter: '{value}%',
                    padding: [-40, 0, 0, 0],
                    textStyle: {       // 其余属性默认使用全局文本样式
                        fontSize: '24',
                        color: '#fff'
                    }
                },
                data: [{value: 40}]
            }
        ]

修改后代码：

series: [
            {
                name: '昨日环比增长率',
                type: 'gauge',
                center:['50%','66%'],  //通过设置Center调整图表位置
                min: -100, // 最小值
                max: 100, // 最大值
                radius: '100%',
                startAngle: 205,
                endAngle: -25,
                pointer: { // 指针设置
                    length: '60%',
                    width: 6
                },
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.5, '#FF0076'], [1, '#0075FE']],
                        width: 20
                    }
                },
                splitLine: { // 分割线样式（及10、20等长线样式）
                    length : 12
                },
                axisTick: { // 刻度线样式（及短线样式）
                    length : 5
                },
                axisLabel: { // 文字样式（及“10”、“20”等文字样式）
                    color : "#fff",
                    distance : 10 // 文字离表盘的距离
                },
                detail: {
                    formatter: '{value}%',
                    padding: [-40, 0, 0, 0],
                    textStyle: {       // 其余属性默认使用全局文本样式
                        fontSize: '24',
                        color: '#fff'
                    }
                },
                data: [{value: 40}]
            }
        ]

补充6-2.png

补充7:柱形图给柱形及对应Y轴文字设置不同颜色

补充7-1.png