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://upload-images.jianshu.io/upload_images/5075443-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

原代码:

xAxis: {
            show: false
        },
        yAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['其它', '酒店客管', '高铁/火车站', '政务大厅', '医院', '汽车站', '飞机场'],

            axisLabel: {
                fontSize: 14,
                textStyle: {  // 设置刻度文字颜色
                    color: '#fff'
                },
            },
            axisTick: {
                show: false
            },
            splitLine: {  //去掉分割线
                show: false,
                lineStyle: {
                    color: '#eeeeee'
                }
            },
            axisLine: {  // 隐藏刻度线
                show: false
            },
        },
        series: [
            {
                type: 'bar',
                barWidth: 15,
                label: {
                    show: true,
                    position: 'right'
                },
                data: [193255, 23438, 31000, 121594, 134141, 681807, 456135]
            }
        ]

修改代码:

yAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['其它', '酒店客管', '高铁/火车站', '政务大厅', '医院', '汽车站', '飞机场'],

            axisLabel: {
                fontSize: 14,
                textStyle: {  // 设置刻度文字颜色
                    color: function(params,index) {
                        let colorList = ['#F757FF', '#6551E8', '#FF0076', '#00D120', '#FEB800', '#00E4D3', '#0075FF'];
                        return colorList[index];
                    }
                },
            },
            axisTick: {
                show: false
            },
            splitLine: {  //去掉分割线
                show: false,
                lineStyle: {
                    color: '#eeeeee'
                }
            },
            axisLine: {  // 隐藏刻度线
                show: false
            },
        },
        series: [
            {
                type: 'bar',
                barWidth: 15,
                label: {
                    show: true,
                    position: 'right'
                },
                itemStyle: {
                    normal: {  // 设置每根柱形的颜色
                        color: function(params) {
                            let colorList= ['#F757FF', '#6551E8', '#FF0076', '#00D120', '#FEB800', '#00E4D3', '#0075FF'];
                            return colorList[params.dataIndex];
                        }
                    }
                },
                data: [193255, 23438, 31000, 121594, 134141, 681807, 456135]
            }
        ]
补充7-2.png
补充8:记一次热力分布图代码,需要下载china.js文件,并附上自己找到的一个基于echarts的大数据可视化模板
option = {
        title: {
            text: '全国分布热点图',
            subtext: '',
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: 'normal'
            },
        },
         tooltip : {
            formatter: function(obj) {
                return `${obj.data.name}:${obj.data.number}`
            }
        },
        geo: {
            show: true,
            type: 'map',
            map: 'china',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#031525',
                    borderColor: '#097bba'
                },
                emphasis: {
                    areaColor: '#2B91B7'
                }
            }
        },

        //配置属性
        series: [{
            name: '分布地点',
            type: 'effectScatter',
            legendHoverLink: true,       //是否启用图例 hover 时的联动高亮。
            hoverAnimation: true,        //是否开启鼠标 hover 的提示动画效果。
            coordinateSystem: 'geo',
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(255,255,0,0.8)'
                }
            },
            data: [
               {"name": "台湾","value": [121.509062, 25.044332],number: 2000, symbolSize: 10},
                {"name": "河北", "value": [114.502461, 38.045474], number: 2000,},
                {"name": "山西", "value": [112.549248, 37.857014, 95]},
                {"name": "内蒙古", "value": [111.670801, 40.818311, 72]},
                {"name": "辽宁", "value": [123.429096, 41.796767, 18]},
                {"name": "吉林", "value": [125.3245, 43.886841, 35]},
                {"name": "黑龙江", "value": [126.642464, 45.756967, 35]},
                {"name": "江苏", "value": [118.767413, 32.041544, 60]},
                {"name": "浙江", "value": [120.153576, 30.287459, 13]},
                {"name": "安徽", "value": [117.283042, 31.86119, 15]},
                {"name": "福建", "value": [119.306239, 26.075302, 80]},
                {"name": "江西", "value": [115.892151, 28.676493, 33]},
                {"name": "山东", "value": [117.000923, 36.675807, 18]},
                {"name": "河南", "value": [113.665412, 34.757975, 24]},
                {"name": "湖北", "value": [114.298572, 30.584355, 21]},
                {"name": "湖南", "value": [112.982279, 28.19409, 81]},
                {"name": "广东", "value": [113.280637, 23.125178, 37]},
                {"name": "广西", "value": [108.320004, 22.82402, 51]},
                {"name": "海南", "value": [110.33119, 20.031971, 61]},
                {"name": "四川", "value": [104.065735, 30.659462, 85]},
                {"name": "贵州", "value": [106.713478, 26.578343, 19]},
                {"name": "云南", "value": [102.712251, 25.040609, 32]},
                {"name": "西藏", "value": [91.132212, 29.660361, 41]},
                {"name": "陕西", "value": [108.948024, 34.263161, 66]},
                {"name": "甘肃", "value": [103.823557, 36.058039, 62]},
                {"name": "青海", "value": [101.778916, 36.623178, 102]},
                {"name": "宁夏", "value": [106.278179, 38.46637, 33]},
                {"name": "新疆", "value": [87.617733, 43.792818, 29]},
                {"name": "北京", "value": [116.405285, 39.904989, 44]},
                {"name": "天津", "value": [117.190182, 39.125596, 58]},
                {"name": "上海", "value": [121.472644, 31.231706, 31]},
                {"name": "重庆", "value": [106.504962, 29.533155, 24]},
                {"name": "香港", "value": [114.173355, 22.320048, 39]},
                {"name": "澳门", "value": [113.54909, 22.198951, 28]}
            ]
        }]
    }
补充8-1.png
补充9:记一次图表设置背景及设置折现渐变
 yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              width: 1,
              lineStyle:{
                type: 'solid',
                color:'rgba(61,126,255, .08)', // 分割线颜色
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: 'rgba(247,251,255,1)', // 背景颜色
              }
            },
          },
series: [{
            type: 'line',
            symbol: 'none',   //这个配置
            symbolSize: 2,   //这个值设置成线的粗细
            itemStyle : {
              normal : {
                color:'#00FF00',
                lineStyle:{
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#0084FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#00BAFF' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              }
            },
          }]
补充9-1.png
补充10:记设置半环形图表
补充10-1
//计算data中value的总和---重点
 let a = 0;
 let seriesData = series.data;
for (let i = 0, len = seriesData.length; i < len; i++) {
   a += seriesData[i].value;
}
//添加新的元素到data中,并设置其颜色样式为背景色(当前背景为白色)---重点
series.data.push({
   value: a,
   name: "",
   itemStyle: { normal: { color: "rgba(0,0,0,0)" } },
});

let option = {
       // color: this.baseOption.colorList,
       // grid: this.baseOption.grid,
        tooltip: {
          trigger: "item",
          formatter: function (item) {
            let total = 0;
            let dataList = data.series.data;
            for (let i = 0; i < dataList.length; i++) {
              total += dataList[i].value;
            }
            let arr = [
              `${item.name}:${item.value}(${(
                (item.value / total) *
                100
              ).toFixed(2)}%)`,
            ];
            return arr.join(" ");
          },
        },
        legend: {
          top: "5%",
          left: "center",
          icon: "circle", // 变为小圆点
        },
        series: [
          {
            name: series.name,
            type: "pie",
            radius: ["50%", "80%"],
            center: ["50%", "90%"],
            startAngle: 180, // 设置数据开始角度---重点
            hoverAnimation: false,
            label: {
              show: true,
              position: "outside",
              formatter: '{b}:{c}({d}%)', // 设置引导数据
            },
            labelLine: {
              normal: {
                show: false, // 隐藏引导线
              },
            },
            data: series.data,
          },
        ],
      };

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342