echarts使用及遇到的问题

echarts基本使用和各个配置项看官网
使用手册
https://echarts.apache.org/handbook/zh/get-started/
配置项
https://echarts.apache.org/zh/option.html#title
如何创建一个折线图几步操作

1、下载echarts
2、引入echarts插件到html页面
3、创建有大小的div作为dom容器

1. [/code] 4、初始化echarts实例对象
2. [code]let myChart = echarts.init(document.getElementById('main'));

复制代码

5、指定配置项和数据（option）

1. let option = {
2.         title:{  //标题
3.         },
4.         xAxis:{  //x轴
5.                 type:'category',
6.                 data:['Mon','Tue','Wed','Thu','Fri'],
7.         },
8.         yAxis:{  //y轴
9.                 type:'value',
10.         },
11.         series:{  //通过type决定图表类型为折线图
12.                 type:'line',  //line折线图
13.                 data:[500,521,405,680,666],
14.                 ...
15.         }
16.         ...
17. },

复制代码

6、将配置项设置给echarts实例对象

1. myChart.setOption(option);

复制代码

7、让图标随屏幕自适应

1. window.addEventListener("resize",function() {
2.         myChart.resize();
3. });

复制代码

主要配置

seties：系列列表，指定什么类型图表
xAxis：直角坐标系grid中x轴
boundaryGap：坐标轴两边留白策略true，这时候刻度只是作为分割线，标签和数据点都会在两个刻度之间带（band）中间
yAxis：直角坐标系grid中y轴
grid：直角坐标系内绘图网格
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stac值后，后一个系列的值会在前一个系列的值上相加
实际操作遇到的问题

问题1：
饼图，用visualMap组件控制颜色的明暗，但是legend上图例的小方块颜色没有相应的变化
具体如图

代码如下

1. // 初始化echarts实例
2.       var myChart1 = echarts.init(document.getElementById('pie'))
3.       // 指定配置项数据
4.       var option1 = {
5.         title: {
6.           text: '饼图pie',
7.           left: 'center',
8.         },
9.         legend: {
10.           orient: 'vertical', //纵向排列
11.           // 在页面显示的位置x轴y轴
12.           x: '80%',
13.           y: 'bottom',
14.           data: ['数据1', '数据2', '数据3', '数据4'], //显示的数据，和series中data的name对应上
15.         },
16.         // color:['blue','yellow'],
17.         visualMap: {
18.           show: false,
19.           type: 'continuous',
20.           min: 0,
21.           max: 850,
22.           seriesIndex: 0,
23.           inRange: {
24.             colorLightness: [0, 1],
25.           },
26.         },
27.         series: [
28.           {
29.             type: 'pie',
30.             // 扇形不显示
31.             // stillShowZeroSum: false,
32.             // 扇形对应的标签不显示
33.             label: {
34.               // show: false,
35.               // position: 'center', //inside饼图里面 默认outside饼图外面
36.               emphasis: {
37.                 show: true,
38.               },
39.               formatter: '{b}\n{d}%',
40.             },
41.             labelLine: {
42.               // show: false,
43.             },
44.             itemStyle: {
45.               normal: {
46.                 shadowBlur: 10,
47.                 shadowOffsetX: 0,
48.                 shadowOffsetY: 0,
49.                 shadowColor: 'rgba(0,0,0,0.5)',
50.                 color: '#c23531',
51.               },
53.               // 放itemStyle里面才有效
54.               emphasis: {
55.                 label: {
56.                   show: true,
57.                   fontSize: '30',
58.                   fontWeight: 'bold',
59.                 },
60.               },
61.             },
62.             data: [
63.               {
64.                 name: '数据1',
65.                 value: '100',
66.               },
67.               {
68.                 name: '数据2',
69.                 value: '150',
70.               },
71.               {
72.                 name: '数据3',
73.                 value: '300',
74.               },
75.               {
76.                 name: '数据4',
77.                 value: '450',
78.               },
79.             ],
80.             // 半径 要写在series里才有效
81.             radius: '50%',
82.             // 圆环
83.             // radius: ['30%', '60%'],
84.             // 玫瑰图
85.             // roseType: 'area',
86.           },
87.         ],
88.       }
89.       // 使用指定的配置项，数据显示图标
90.       myChart1.setOption(option1)

复制代码

原因：
可能是visualMap组件一般用在热力图，又比如地球疫情显示什么的。visualMap颜色和legend属性好像不能关联上。
饼图色彩明暗实现的话不用visualMap，换别的方式，比如js计算数值在哪个范围然后设置color是什么颜色。
暂时未解决
问题2：
柱状图，给柱子设置底色，官方文档上是这么说的

1. showBackground: true,
2. backgroundStyle: {
3.    color: 'rgba(245, 245, 245,0.8)',
4. },

复制代码

但是实际写的时候并起没有效果，发现写的并没有什么问题
解决：
版本不对，使用的版本太低了，设置底色的这几行代码需要在4.7版本及以上才支持，我引入的是4.3版本的
问题3：
控制台报错Uncaught TypeError: Cannot read property 'queryComponents' of undefind
解决：
需要初始化setOption()后再调用事件xxx.setOption()
问题4：
开启平移，缩放时roam允许缩放或拖动，zoom缩放比例，地图下钻后，地图不在容器中间，或者跑到容器外面
解决：
setOption添加第二个参数true，表示重新绘制

1. myChart.setOption(option,true);

复制代码

问题5：
开启visualMap组件地图显示不同颜色，修改散点图的点的颜色不起作用
解决：
visualMap组件影响到了散点图的颜色，所以不起作用
在visualMap中加seriesIndex: 0指定哪一系列series使用visualMap

网上还有一种方法


问题6：
echarts.min.js:22 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The image argument is a canvas element with a width or height of 0.

解决：
给图表容器设置宽高

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！