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容器
4、初始化echarts实例对象
let myChart = echarts.init(document.getElementById('main')); 5、指定配置项和数据（option）
let option = {
title:{//标题
},
xAxis:{//x轴
type:'category',
data:['Mon','Tue','Wed','Thu','Fri'],
},
yAxis:{//y轴
type:'value',
},
series:{//通过type决定图表类型为折线图
type:'line',//line折线图
data:,
...
}
...
}, 6、将配置项设置给echarts实例对象
myChart.setOption(option); 7、让图标随屏幕自适应
window.addEventListener("resize",function() {
myChart.resize();
}); 主要配置
seties：系列列表，指定什么类型图表
xAxis：直角坐标系grid中x轴
boundaryGap：坐标轴两边留白策略true，这时候刻度只是作为分割线，标签和数据点都会在两个刻度之间带（band）中间
yAxis：直角坐标系grid中y轴
grid：直角坐标系内绘图网格
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stac值后，后一个系列的值会在前一个系列的值上相加
实际操作遇到的问题
问题1：
饼图，用visualMap组件控制颜色的明暗，但是legend上图例的小方块颜色没有相应的变化
具体如图
https://img-blog.csdnimg.cn/3fa3b441d61d4069b1250c7e7375c6fe.png
代码如下
// 初始化echarts实例
var myChart1 = echarts.init(document.getElementById('pie'))
// 指定配置项数据
var option1 = {
title: {
text: '饼图pie',
left: 'center',
},
legend: {
orient: 'vertical', //纵向排列
// 在页面显示的位置x轴y轴
x: '80%',
y: 'bottom',
data: ['数据1', '数据2', '数据3', '数据4'], //显示的数据，和series中data的name对应上
},
// color:['blue','yellow'],
visualMap: {
show: false,
type: 'continuous',
min: 0,
max: 850,
seriesIndex: 0,
inRange: {
colorLightness: ,
},
},
series: [
{
type: 'pie',
// 扇形不显示
// stillShowZeroSum: false,
// 扇形对应的标签不显示
label: {
// show: false,
// position: 'center', //inside饼图里面 默认outside饼图外面
emphasis: {
show: true,
},
formatter: '{b}\n{d}%',
},
labelLine: {
// show: false,
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)',
color: '#c23531',
},
// 放itemStyle里面才有效
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold',
},
},
},
data: [
{
name: '数据1',
value: '100',
},
{
name: '数据2',
value: '150',
},
{
name: '数据3',
value: '300',
},
{
name: '数据4',
value: '450',
},
],
// 半径 要写在series里才有效
radius: '50%',
// 圆环
// radius: ['30%', '60%'],
// 玫瑰图
// roseType: 'area',
},
],
}
// 使用指定的配置项，数据显示图标
myChart1.setOption(option1) 原因：
可能是visualMap组件一般用在热力图，又比如地球疫情显示什么的。visualMap颜色和legend属性好像不能关联上。
饼图色彩明暗实现的话不用visualMap，换别的方式，比如js计算数值在哪个范围然后设置color是什么颜色。
暂时未解决
问题2：
柱状图，给柱子设置底色，官方文档上是这么说的
showBackground: true,
backgroundStyle: {
color: 'rgba(245, 245, 245,0.8)',
}, 但是实际写的时候并起没有效果，发现写的并没有什么问题
解决：
版本不对，使用的版本太低了，设置底色的这几行代码需要在4.7版本及以上才支持，我引入的是4.3版本的
问题3：
控制台报错Uncaught TypeError: Cannot read property 'queryComponents' of undefind
解决：
需要初始化setOption()后再调用事件xxx.setOption()
问题4：
开启平移，缩放时roam允许缩放或拖动，zoom缩放比例，地图下钻后，地图不在容器中间，或者跑到容器外面
解决：
setOption添加第二个参数true，表示重新绘制
myChart.setOption(option,true); 问题5：
开启visualMap组件地图显示不同颜色，修改散点图的点的颜色不起作用
解决：
visualMap组件影响到了散点图的颜色，所以不起作用
在visualMap中加seriesIndex: 0指定哪一系列series使用visualMap
https://img-blog.csdnimg.cn/f8c806c2db464b31a05018cdaec8d167.png
网上还有一种方法
https://img-blog.csdnimg.cn/c1a61133c8504701a92d1a60e5df0255.png
https://img-blog.csdnimg.cn/c751d8a831e0447d92d14169542ea694.png
问题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.
https://img-blog.csdnimg.cn/1c70b035d87449d7a5af660efb3b714e.png
解决：
给图表容器设置宽高
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]