echarts基本使用
- 引入echarts.min.js
- 获取dom元素
- 初始化echarts实例:echarts.init(dom);
- 配置图表样式 var option = {…};
- 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'
},
]
}
感谢阅读,将持续补充及更新 ~