Echarts在js和Vue3中的使用

在js中

1、引入Echarts文件

//在html中直接引用js文件即可	
<script src="js/echarts.min.js"></script>
	<script src="js/echarts-gl.min.js"></script>

2、实现图形方法 

//获取元素
var myChart = echarts.init($("#ShengChanPinZhi")[0]);
//声明图形元素
	var option = {
	  tooltip: {
		trigger: 'item',
		formatter:"{a} <br/>{b} : {c}m² ({d}%)"
	  },
	  series: [
		{
		  name: '品质管控-本月',
		  type: 'pie',
		  radius: '40%',
		  data: [{name:'名称1',value:10},{name:'名称2',value:20}],
			label: {
				fontSize: 8,
				normal: {
					color: "#fff",
					formatter:"{b}： \n {c}m² \n({d}%)"
				},
			},
			itemStyle: {
			  normal: {
			    color: function (colors) {
			      var colorList = [
			        '#5470c6',
			        '#ffc0cb',
			        '#ef6567',
			        '#fc8251',
			        '#9A60B4',
			        '#f9c956',
			      ];
			      return colorList[colors.dataIndex];
			    }
			  },
			},
		  emphasis: {
			itemStyle: {
			  shadowBlur: 10,
			  shadowOffsetX: 0,
			  shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		  }
		}
	  ]
	};
//清除之前生成的图形
	myChart.clear();
//加载现在的图形
	myChart.setOption(option);

在VUE3中

1、项目中引入依赖

npm install echarts  //下载依赖

2、实现图形方法

import * as echarts from 'echarts'; // 引用echarts
//声明图形接收变量
let zhuyeChart: any;
function zhuyeTu(list: any, xdata: any) {
  //销毁原有图表
  if (zhuyeChart != null && zhuyeChart != "" && zhuyeChart != undefined) {
    zhuyeChart.dispose();
  }
  //用电趋势图表
  let main: HTMLElement = document.getElementById('mainZhuYe') as HTMLElement;
  main.removeAttribute('_echarts_instance_');
  zhuyeChart = echarts.init(main, 'dark');
  var option = {
    backgroundColor: '',
    tooltip: {
      trigger: 'axis'
    },
    // legend: {
    //     top: 'top',
    //     textStyle: {
    //         color: 'rgba(255,255,255,.5)',
    //         fontSize: '12',
    //     },
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xdata
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} w'
      }
    },
    series: list
  };

  // 使用刚指定的配置项和数据显示图表。
  zhuyeChart.setOption(option);
}