Echarts在Vue中的使用

Posted 2020-11-20 candy-yao

1、使用 cnpm 或 npm 安装 Echarts

cnpm方式

cnpm install echarts -S   

或者 npm方式

npm install echarts --save

2、在项目文件的入口js文件main.js中添加

import echarts from "echarts"

3、在需要添加图表的组件中创建依赖的实例

var echarts = require(‘echarts‘);

　　使用这种方式得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大。也可以只按需引入需要的模块。例如

// 引入 ECharts 主模块
var echarts = require(‘echarts/lib/echarts‘);
// 引入柱状图
require(‘echarts/lib/chart/bar‘);
// 引入提示框和标题组件
require(‘echarts/lib/component/tooltip‘);
require(‘echarts/lib/component/title‘);

4、在模板中创建图表容器（必须给出确定的宽高值，不能使用%）

<div class="charts">
    <div class="headTable" :style="{width:‘1200px‘,height:‘30rem‘,background:‘red‘}" ref="headTable">
</div> 

5、写入js

<script>
var echarts = require(‘echarts‘);
export default {
  name:‘charts‘,
  data () {
    return {
      
    }
  },
  methods: {
    
  },
  mounted () {
    /*ECharts图表*/
  var myChart = echarts.init(this.$refs.headTable);
  myChart.setOption({
    series : [
    {
      name: ‘访问来源‘,
      type: ‘pie‘,
      radius: ‘55%‘,
      itemStyle: {
      normal: {
        // 阴影的大小
        shadowBlur: 200,
        // 阴影水平方向上的偏移
        shadowOffsetX: 0,
        // 阴影垂直方向上的偏移
        shadowOffsetY: 0,
        // 阴影颜色
        shadowColor: ‘rgba(0, 0, 0, 0.5)‘
      }
      },
      data:[
      {value:400, name:‘搜索引擎‘},
      {value:335, name:‘直接访问‘},
      {value:310, name:‘邮件营销‘},
      {value:274, name:‘联盟广告‘},
      {value:235, name:‘视频广告‘}
      ]
    }
    ]
  })
  }
}
</script>