Vue中使⽤Echarts绘制图表1.先安装Echarts
1.使⽤npm 安装或者
npm install echarts -S
2.使⽤cnpm淘宝镜像安装
安装淘宝镜像
使⽤淘宝镜像安装Echarts
cnpm install echarts -S
2.在main.js中引⽤
不⽤打包程序中引⽤，注册全局组件
import * as echarts from 'echarts/lib/echarts'
在打包程序中引⽤加上（按需引⼊）
import * as echarts from 'echarts/core'
// BarChart柱状图
import {
BarChart
} from 'echarts/charts';
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components';
// 引⼊ Canvas 渲染器，注意引⼊ CanvasRenderer 或者 SVGRenderer 是必须的⼀步import {
CanvasRenderer
} from 'echarts/renderers';
// 注册必须的组件
echarts.use(
[TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer] );
在官⽅⽂档中查看
3.实现Echarts绘图
<template>
<div>
<h1>数据报表</h1>
<div class="main">
<div id="myChart" :style='{width: 300px;height: 400px;}'></div>
</div>
</div>
</template>
1.在脚⼿架中使⽤（打包程序）
export default {
data(){
return{
//存放数据
}
}
},
drawLine() {
let myChart = this.$echarts.ElementById('myChart'));
// 绘制图表
myChart.setOption({
title: {
text: '我的第⼀个ECharts学习',
textStyle：{
//设置显⽰⽂字样式
}
//设置标题⼤⼩超出x轴不显⽰
axisLabel: { interval:0, // rotate:40, formatter:function(value) { return value.split("").join("\n"); }}, },
backgroundColor: '#cdd2d2',
tooltip: {},
xAxis: {
data: ['衬衫', '⽺⽑衫', '雪纺衫', '裤⼦', '⾼跟鞋', '袜⼦']
},
yAxis: {},
series: [{
svg和canvas的区别name: '销量',
type: 'bar',
//data: [5, 20, 36, 10, 10, 20]
/
/单独设置每⼀项中的样式
data: [{
value: 5,
itemStyle: { color: '#c23531'}
}]
});
},
},
//注意：我们要在mounted⽣命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页⾯中mounted() {
this.drawLine()
}
不需要打包程序中使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。