安装 npm i echarts -S 使用 1.导入echarts在组件内使用 2.导入全局 挂载在原型上 全局使用 查看package.json echarts版本 全局使用: main.js 引入echarts import * as echarts from 'echarts' 打印看一下console.log('---echarts---',echarts) Vue.prototype.$echarts = echarts
在组件中使用------ DashBoard--index.vue 准备一个容器
①data中定义初始值 data () { return { chart: null, } } ②methods定义方法 methods: { initChart () { this.chart = this.refs.chart) // 设置图标配置 const option = { color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'], title: { text: '{a|}', textStyle: { color: 'red', rich: { a: { width: 50, height: 50, backgroundColor: { image: 'gimg2.baidu.com/image_searc…' } } } } }, legend: {}, radar: [ { indicator: [ { text: 'Indicator1' }, { text: 'Indicator2' }, { text: 'Indicator3' }, { text: 'Indicator4' }, { text: 'Indicator5' } ], center: ['25%', '50%'], radius: 120, startAngle: 90, splitNumber: 4, shape: 'circle', axisName: { formatter: '【{value}】', color: '#428BD4' }, splitArea: { areaStyle: { color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'], shadowColor: 'rgba(0, 0, 0, 0.2)', shadowBlur: 10 } }, axisLine: { lineStyle: { color: 'rgba(211, 253, 250, 0.8)' } }, splitLine: { lineStyle: { color: 'rgba(211, 253, 250, 0.8)' } } }, { indicator: [ { text: 'Indicator1', max: 150 }, { text: 'Indicator2', max: 150 }, { text: 'Indicator3', max: 150 }, { text: 'Indicator4', max: 120 }, { text: 'Indicator5', max: 108 }, { text: 'Indicator6', max: 72 } ], center: ['75%', '50%'], radius: 120, axisName: { color: '#fff', backgroundColor: '#666', borderRadius: 3, padding: [3, 5] } } ], series: [ { type: 'radar', emphasis: { lineStyle: { width: 4 } }, data: [ { value: [100, 8, 0.4, -80, 2000], name: '数据1' }, { value: [60, 5, 0.3, -100, 1500], name: '数据2', areaStyle: { color: 'rgba(255, 228, 52, 0.6)' } } ] }, { type: 'radar', radarIndex: 1, data: [ { value: [120, 118, 130, 100, 99, 70], name: '数据3', symbol: 'rect', symbolSize: 12, lineStyle: { type: 'dashed' }, label: { show: true, formatter: function (params) { return params.value } } }, { value: [100, 93, 50, 90, 70, 60], name: '数据4', areaStyle: { color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [ { color: 'rgba(255, 145, 124, 0.1)', offset: 0 }, { color: 'rgba(255, 145, 124, 0.9)', offset: 1 } ]) } } ] } ] } // 使用刚指定的配置项和数据显示图表。 this.chart.setOption(option) } },③ mounted中调用 mounted () { this.initChart() }
