ToB企服应用市场:ToB评测及商务社交产业平台
标题:
echarts使用及遇到的问题
[打印本页]
作者:
反转基因福娃
时间:
2022-6-25 12:52
标题:
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容器
[/code] 4、初始化echarts实例对象
[code]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:[500,521,405,680,666],
...
}
...
},
复制代码
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上图例的小方块颜色没有相应的变化
具体如图
代码如下
// 初始化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: [0, 1],
},
},
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
网上还有一种方法
问题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.
解决:
给图表容器设置宽高
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4