快速上手echarts
发布日期:2022-02-22 16:04:49 浏览次数:12 分类:技术文章

本文共 4014 字,大约阅读时间需要 13 分钟。

echarts基本使用

  1. 引入echarts.min.js
  2. 获取dom元素
  3. 初始化echarts实例:echarts.init(dom);
  4. 配置图表样式 var option = {…};
  5. dom.setOption(option);

图表的配置项和数据

var option = {
   
backgroundColor: '#2c343c' //设置全局背景
textStyle: {
color: 'rgba(255, 255, 255, 0.3)' }//设置全局字体样式
title: {    
text: '图表标题', //支持 \n
//设置位置
left: "center|left|right|像素值|相对于容器高宽的百分比", 
top: "40%",
textStyle: {    
  color: "#fff",
  fontSize: 10, 
  fontWeight: 200
}
},
//提示框
tooltip: {    
show:true,
trigger:'item|axis|none',//触发类型
},
//图例
legend: {    
data: ['销量'],
orient: 'vertical',//图例列表的布局朝向
//图例标记的宽高位置
itemWidth: 10,
itemHeight: 2,
right: 5,
icon: 'circle',//标记类型
textStyle: {    
  fontSize: 5,
  fontWeight: 800
},
}, 
xAxis: {    
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
//坐标值
axisLabel: {
 
  fontSize: 5,
  show: true,
  interval: 0,// 显示x轴所有坐标值
}, 
//去掉轴刻度线
axisTick: {    
  show: false
},
//取消显示坐标轴
axisLine: {    
  show: false
}
},
yAxis: {    
type: 'value',
name: '单位:吨',
//文字水平对齐方式
nameTextStyle: {    
align: 'right',
color: '#19aaf6'
},
interval: 200,//设置坐标轴分割间隔
splitLine: {    
show: true,  //显示坐标轴在 grid 区域中的分隔线。横向网格线
lineStyle: {    
  color: '#666d79'
  // opacity:0.5
}
  },
},
//网格线可以调整大小和位置
grid: {    
left: 40,
top: 60,
lineStyle: '#c8cbcf',//网格线颜色
 },
series: [{    
name: '销量',//系列名称{a},用于tooltip的显示,legend的图例筛选
type: 'bar',//图表类型 : line ,pie
data: [5, 20, 36, 10, 10, -20],
itemStyle: {    
color: '#da1793'
  },
label: {
 //数据标签-数据值
show: true,
position: 'bottom',
offset: [0, 100],//文字偏移 :横向,纵向
//设置每个系列的文本
textStyle: {    
  color: 'blue'
}
},
}]};

饼图:

series:[
{    
type:'pie',
radius:'55%',
//radius: ['30%', '55%'], //内半径,外半径
minAngle: 30, //最小角度
startAngle: 210, //起始角度
color: ["#00AEFF","#284AC6"],
center: ['46%', '50%'],  //[横坐标,纵坐标]
 selectedOffset:0,//选中扇区的偏移距离
roseType:'angle',//南丁格尔图
data: [ //数组 每个数组元素是对象格式
{
value: 235, 
name: '视频广告' ,
selected:true,// 该数据项是否被选中
//设置每个扇区的颜色
itemStyle: {    
color: '#18b0ff',
}, 
},
{
value: 274, name: '联盟广告' },
   ],
 
  label: {    
position: 'inner' ,//数据标签写在内部
//字符串模板,模板变量 :  a:系列名 b:数据名 c:数据值 d:百分比
formatter: '{a|{b}}:{n|{c}}{a|万吨}\n\n', 
/*内边距 padding:[上,下,左,右]
 padding:4表示 [4,4,4,4]
 padding:[3,4] 表示 [3,4,3,4]*/
padding: [0, -80],
fontSize: 6,
rich: {    //富文本框
  n: {    
fontSize: 10,
color: '#fff'
  },
  a: {    
fontSize: 5,
color: '#fff'
  }
}
  },
  labelLine: {    
  show: false ,//不显示视觉引导线样式
  length: 20, //半径方向的长度 视觉引导线第一段
  length2: 80, //横向的长度 视觉引导线第二段
  borderRadius: 3,
  lineStyle: {    
type: 'solid',// dotted,dashed  视觉引导线 线型
color: '#ccc'
  }
  },
}],

默认选中扇区

myChart.dispatchAction({

 type: "highlight",  seriesIndex: 0,  dataIndex: 0,})myChart.on("mouseover", function (e) {
 if (e.dataIndex != index) {
   chart.dispatchAction({
 type: "downplay",
  seriesIndex: 0,
  dataIndex: index,
})  }})myChart.on("mouseout", function (e) {
 index = e.dataIndex  chart.dispatchAction({
   type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,  })})

折线图

series:[
{    
type:'line',
smooth: true,
symbolSize: 1,
showSymbol: false,//不显示圆点
// symbol:'none',//没有圆点
symbol: 'circle', //设置折线上的点类型
symbolSize: 3,//设置线两端的标记大小
lineStyle: {    
width: 1//设置线条粗细
},
//高亮样式
emphasis: {    
itemStyle: {    
  color: '#18b0ff',
  borderColor: '#fff',
}
},
}]

dataset

dataset: {

   // 提供一份数据。
source: [
  ['product', '有限天津分公司', '有限上海分公司', '有限深圳分公司', '有限湛江分公司'],
  ['1月', 1100, 700, 900, 780],
  ['2月', 120, 700, 800, 780],
  ['3月', 1100, 700, 1000, 600],
 ],
  // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
   series: [
 {
type: 'bar', color: '#64fcab', barMinWidth: 4 },
 {
type: 'bar', color: '#242e3f', barMinWidth: 4 },
 {
type: 'bar', color: '#18b0ff', barMinWidth: 4 }, 
   ]

原生元素组件

graphic: {

   elements: [
  {
   type: "text",//文字组件
left: "60%",
top: "40%",
z: 10,
style: {
 text: "35%",
  textAlign: "center",
  fill: "#fff",
  fontSize: 8,
  fontWeight: 700
}
  },
  {
   type: 'image',//图形组件
style: {
 image: "img/oil_03.png",
  width: 17,
  height: 17
},
left: 'center',
top: '95'
  },
]  }

感谢阅读,将持续补充及更新 ~

转载地址:https://blog.csdn.net/Conradine_Lian/article/details/108567446 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ES6知识总结 — 上篇(思维导图版)
下一篇:ES6知识总结 — 下篇(思维导图版)

发表评论

最新留言

网站不错 人气很旺了 加油
[***.13.112.47]2022年09月30日 07时32分00秒