echarts图表通用写法

1) 先在html文件中准备一个定义了高宽的 DOM 容器

<div id="pie" style="width: 430px;height: 375px;padding-left:25px;"></div>

2) 引入js

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

3) 开始写js代码

 # 通过 echarts.init 方法初始化一个 echarts 实例
 myChart = get_chart('pie');
 # 图表数据
 pie_data1=[{'value': 1048, 'name': '搜索引擎'},
            {'value': 735, 'name': '直接访问'},
            {'value': 580, 'name': '邮件营销'},
            {'value': 484, 'name': '联盟广告'},
            {'value': 300, 'name': '视频广告'}]
 # 通过 setOption 方法生成一个简单的饼图          
 get_pie_data(myChart,pie_data1)
 
 # 封装的echarts.init 方法
 function get_chart(ch) {
     var ch = document.getElementById(ch);
     if (ch) {
     return myCharts = echarts.init(ch);
     }
     else {
     return myCharts = null;
     }
 }
 # 绘制饼图
 function get_pie_data(myChart,data) {
     if (myChart){
     	# 样式设置
         var option = {
             color: ['#1c90e7', '#fc6600', '#ffbb2f', '#ffff00', '#009933', '#ff66ff', '#006699', '#ff9999', '#808000', '#00cccc','#999999'],
             // 提示框
             tooltip: {
             show: true,
             trigger: 'item',
             formatter: '{b}: {c}票'
             },
             series: [
             {   type: 'pie',
                 radius: ['35%', '50%'],
                 center: ['50%', '50%'],
                 label: {formatter: '{b}\n {c} ({d}%)',},
                 data: data
             }
             ]
         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
     }
     else{
     console.log('pie无数据')
     }
 }