下载echarts
npm i echarts --save
引用echarts
import * as echarts from ‘echarts’ 注意:不要使用 import echarts from ‘echarts’,后续会报init没有定义的错误
代码
<div class="echart-pie">
<div ref="echartsOne" class="echartss"></div>
</div>
data里的代码
option: {
tooltip:{},
legend: {
data:['数量'],
textStyle:{
fontSize: 14,
color: '#ffffff'
},
},
xAxis: {
data: ['成都','上海','北京','深圳','福建','江苏'],
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
},
yAxis: {
axisLabel: {
show: true,
textStyle: {
color: '#fff'
}
}
},
series: [{
name: '数量',
type: 'bar',
data: [12,5,3,0,0,5],
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#61a0a8','#91cc75', '#d48265', '#91c7ae','#749f83', '#ca8622'];
return colorList[params.dataIndex]
}
}
}
}]
}
方法的代码
mounted() {
this.setTest()
},
methods: {
setTest(){
let bar_dv = this.$refs.echartsOne
if(bar_dv) {
let myChart = echarts.init(bar_dv);
myChart.setOption(this.option)
}
}
}
css
.echart-pie {
width: 100%;
height: 340px;
.echartss {
width: 100%;
height: 100%;
}
}
效果图
|