vue webpack 使用ECharts图表

引入Echarts

npm install echarts --save
复制代码

使用文件引入

<script>
    const echarts = require('echarts')
</script>
复制代码

html代码使用

<template>
    <div>
        <div id="chartContainer" :style="{width: '100%', height: '300px'}"></div>
    </div>
</template>
复制代码

方法映射数据显示图表

<script>
 const echarts = require('echarts')
 export default {
     data(){
         return{
             // 注意映射数据格式为vaue,和name属性.
            gamePlayData:[{
                value:1,
                name:'张三'
            },{
                value:2,
                name:'李四'
            }] 
         }
     },
     creatd(){
       this.canvasjs();
     },
     methods:{
       canvasjs(gamePlayData) {
           // 特别注意此处setimeout   此处由于需要html代码全部执行完才能去映射数据因此此处使用延迟操作,同样也能使用vue生命周期(未检测是否可行)
        setTimeout(() => {
          const chartContainer = document.getElementById('chartContainer');
          const myChart = echarts.init(chartContainer);
          // 绘制图表
          myChart.setOption({
            // 设置整体背景颜色和单个tip层颜色,
            backgroundColor: '#12cf96',
            color:[
              '#ed2510',
              '#1076ed',
              '#ed10e5',
              '#070009',
              '#7b0c9b',
              '#ed7310',
              '#090100'
            ],
              // 图表标题和位置
            title: {
              text: '玩法分布',
              x: 'center',
            },
            // 图表默认显示数据
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/> {c},({d}%)',
            },
            // 设置鱼鳔类型为pie  位置  数据
            series: [{
              name: '访问来源',
              type: 'pie',
              radius: '80%',
              center: ['50%', '60%'],
              data: gamePlayData,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    formatter: '{b} , {c},({d}%)',
                  },
                  labelLine: { show: true },
                },
              },
            }],
          });
        }, 300);
      },  
     },
 }
</script>
复制代码

详细介绍参考:www.echartsjs.com/tutorial.ht… 官方文档

转载于:https://juejin.im/post/5bc00d91f265da0ac962c3ff