开发中一般都会选择echarts来绘制图表,使用也很方便。
安装echarts
npm install echarts --save
// 或者
cnpm install echarts --save
引入 ECharts
在main.js中引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
渲染器的使用
默认使用 Canvas 渲染,Canvas 更适合绘制图形元素数量非常大。如果想使用 SVG 渲染,代码中须包括有 SVG 渲染器模块。
// 获取要渲染的节点
let containerDom = document.getElementById('customId')
// 使用 Canvas 渲染器(默认)
let chart = this.$echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于:
let chart = this.$echarts.init(containerDom);
// 使用 SVG 渲染器
let chart = this.$echarts.init(containerDom, null, {renderer: 'svg'});
使用实例
一种图表样式多处复用,此次拿折线图举例
- 设置图表样式
lineChart(chartName, data, name) {
chartName.setOption({
tooltip: {
trigger: 'axis',
},
color: '#5B8FF9 ',
grid: {
top: '22%',
left: '2%',
right: '4%',
bottom: '8%',
containLabel: true,
},
xAxis: {
type: 'category',
boundaryGap: true, // 0开始
data: data[0].x,
axisLine: {
//y轴
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#b0b3b8',
},
},
},
yAxis: {
type: 'value',
// max,min 导致图表y轴的轴线不均等
// max: 'dataMax',
// min: 'dataMin',
name: name,
nameTextStyle: { color: '#b0b3b8' },
// max:Math.max(...a),
splitLine: {
show: true,
lineStyle: {
color: '#0e1c3d', // 网格线
},
},
axisLine: {
//y轴
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
color: '#b0b3b8',
},
},
},
axisPointer: {
// 指示器
type: 'line',
lineStyle: {
width: 2.5,
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#eee',
},
{
offset: 1,
color: '#060B20',
},
]),
},
},
series: data.map((v) => {
return {
name: v.x_data,
type: 'line',
stack: '总量',
data: v.y,
showSymbol: name == '( 分钟 )' ? true : false,
symbol: 'circle', //标记的图形
symbolSize: 6,
zlevel: 9, // 层级设置,指示器隐藏于拐点下
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#395DCA',
},
{
offset: 0.5,
color: '#56D3E0',
},
{
offset: 1,
color: '#BAC2CD',
},
]),
borderColor: '#70C8FF', //拐点边框颜色
// borderWidth:3//拐点边框大小
emphasis: {
color: '#96F5FF', //hover拐点颜色定义
borderWidth: 3,
},
},
areaStyle: {
color:
name == '( 分钟 )'
? new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 0,
color: 'rgba(48,117,160,0.46)',
},
{
offset: 0.5,
color: 'rgba(100,209,222,0.20)',
},
{
offset: 1,
color: 'rgba(38,77,167,0.39)',
},
])
: 'transparent',
},
}
})
})
window.addEventListener('resize', () => {
chartName.resize()
})
}
- 调用方式
let sceneChart = this.$echarts.init(
document.getElementById(‘chartName’),
null,
{ renderer: 'canvas' },
)
let tableData = [x:['黑龙江', '海南', '云南', '广东'],y:[81, 78, 75, 72]]
let unit = ''
this.lineChart(sceneChart, tableData, unit)
注意:绑定数据格式根据实际情况修改