安装
npm i echarts -S
使用
在模板中定义canvas区域
<template>
<div id="charts" ref="charts" style="width: 300px; height: 200px;"></div>
</template>
初始化echart
<script>
import echarts from 'echarts';
import { columnarOption } from './echart.config.js';
export default {
mounted() {
const myChart = echarts.init(this.$refs.charts);
myChart.setOption(columnarOption);
}
};
</script>
接下来是最重要的地方 echarts的配置
echart.config.js文件：
tooltip
export const columnOption = {
tooltip: { // 提示框组件
trigger: 'axis', // 触发类型：坐标轴触发
formatter: function(params, ticket, callback) { // 自定义提示内容
let str = '';
// item.marker：icon标识符
// item.key和item.value：自己在data中设置的内容
params.forEach(item=>{
str += `</br>${item.marker}${item.key}:${item.value}`
})
return str
}
},
calculable: true, // 是否启用拖拽重计算特性，默认关闭(即值为false)
}
提示框组件：
grid
直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
grid: {
top: 20 // grid 组件离容器顶部的距离
}
使用前：
使用后：
legend（图例组件）
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
data: ['年度实际计划完成率', '三年计划完成率'], // 注意这样需要与series配置项的name一致
selectedMode: false, // 控制是否可以通过点击图例改变系列的显示状态。（通过点击让其相应的数据显示or隐藏）
bottom: 15, // 距离底部的距离
itemWidth: 7, // icon的宽度
itemHeight: 7, // icon的高度
itemGap: 40, // 项与项之间的距离
icon: 'circle', // icon的形状
textStyle: { // 设置文字的样式
color: '#fff',
fontSize: 8
}
}
显示如下：
xAxis、yAxis
直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
xAxis: [
{
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: 8
},
interval: 0 // 强制设置坐标轴分割间隔（默认是20，如果间隔过大则部分data会背隐藏）
// rotate: 0 旋转字体
},
data: ['广州市', '深圳市', '佛山市', '东莞市', '中山市', '珠海市']
}
]
同理设置y轴
yAxis: [
{
type: 'value',
splitLine: { // 去除网格线
show: false
},
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize: 8
}
}
}
]
series
系列中的数据内容数组。数组项通常为具体的数据项。
series: [
{
name: '年度实际计划完成率',
type: 'pictorialBar', // 象形柱图
symbol: `image://data:image/png;base64,${blueColumImg}`, // 这里需要使用base64格式
symbolSize: ['60%', '100%'],
symbolOffset: ['150%', '0%'],
// data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7],
data: dataHandler.yearData,
itemStyle: {
normal: {
color: '#41A0EF'
}
}
},
{
name: '三年计划完成率',
// type: 'bar',
type: 'pictorialBar',
// barGap: '-20%',
symbol: `image://data:image/png;base64,${greenColumImg}`,
symbolSize: ['60%', '100%'],
symbolOffset: ['150%', '0%'],
// data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7],
data: dataHandler.threeYearData,
itemStyle: {
normal: {
color: '#33F8A3'
}
}
}, {
// 蓝色柱子的球
name: 'ball',
type: 'pictorialBar',
barGap: '0%',
symbolPosition: 'end',
symbolSize: 20,
// symbolOffset: ['-140%', '-150%'],
symbolOffset: dataHandler.ballOffset, // 球往x轴、y轴挪动的距离（为了保证球在柱体的上方）
color: '#41A0EF',
data: dataHandler.yearBallData // 球的数据与柱体数据保持一致
// data: [{
// value: 2.0,
// symbolSize: 7
// }, {
// value: 4.9,
// symbolSize: 7
// }, {
// value: 7.0,
// symbolSize: 7
// }, {
// value: 23.2,
// symbolSize: 7
// }, {
// value: 25.6,
// symbolSize: 7
// }, {
// value: 76.7,
// symbolSize: 7
// }]
}, {
// 绿色柱子的球
name: 'ball',
type: 'pictorialBar',
barGap: '0%',
symbolPosition: 'end',
symbolSize: 20,
// symbolOffset: ['-140%', '-150%'],
symbolOffset: dataHandler.ballOffset,
color: '#33F8A3',
data: dataHandler.threeYearBallData
// data: [{
// value: 2.6,
// symbolSize: 7
// }, {
// value: 5.9,
// symbolSize: 7
// }, {
// value: 9.0,
// symbolSize: 7
// }, {
// value: 26.4,
// symbolSize: 7
// }, {
// value: 28.7,
// symbolSize: 7
// }, {
// value: 70.7,
// symbolSize: 7
// }]
}
]
显示的是中间的内容，这里实际上是4个数据（蓝色柱体与蓝色球为一条，绿色柱体与绿色球为一条）
