vue中经常需要使用echarts图标,这是我的总结方法,记录在这里,以便后续再想使用的时候可以快速找到自己的日记。
1、先在vue中安装导入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2、新建echarts的js文件
export const NewMember = { title:{ show: true, text:'近期新注册人数' }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['0', '0', '0', '0', '0', '0', '0'] }, yAxis: { type: 'value', axisLabel: { formatter: '{value} 人' } }, toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, } }, series: [{ name:'当日注册人数', data: [0, 0, 0, 0, 0, 0, 0], type: 'line', symbol: 'triangle', symbolSize: 20, lineStyle: { color: 'green', width: 4, type: 'dashed' }, itemStyle: { borderWidth: 3, borderColor: 'yellow', color: 'blue' }, markPoint: { data: [ {type: 'max', name: '最大值'}, {type: 'min', name: '最小值'} ] }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }]};
3、在vue中导入echarts的js文件
4、在vue中写好要导入图标的区域
<div id="recentNewMember"style="margin-left: 33px">div>
5、初始化该图表
var chart3 = this.$echarts.init(document.getElementById('recentNewMember'));chart3.setOption(NewMember);
6、从后台获取数据后写入echarts
NewMember.xAxis.data = this.term
NewMember.series[0].data = this.recentNewMember
以上就是我总结的vue中使用echarts的简易方法,如果您看到了,并且想转发的话,可以随意转发,本人是后台开发工程师,偶尔写点前端,还属于前端菜鸟级别,所以只要能帮助大家,那不胜荣幸。