vue 中echarts使用

vue 中echarts使用

通过 npm 获取 echarts，npm install echarts --save，

下载好echarts以后在main.js中全局引入 使用少的话可以早某个vue页面引入即可

import echarts from 'echarts'
Vue.prototype.$echarts = echarts


//在template中创建div
<template>
   <div id="myChart" style="height:300px; padding-top:30px "></div>
</template>
export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
   mounted(){
      this.drawLine();
      thi.sbzt() /或者这样也行  看下面的方法
    },

    methods: {
      drawLine(){
// 基于准备好的dom，初始化echarts实例
         let myChart = this.$echarts.init(document.getElementById('myChart'))
///  // zh这里是eharts官网  组件的数据
      myChart.setOption({
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data: ['访问量', '降水量'
      },
      toolbox: {
          show: true,
      },
      calculable: true,
      xAxis: [
          {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            
          }
      ],
      yAxis: [
          {
              type: 'value',
          }
      ],
      series: [
          {
              name: '访问量',
              type: 'bar',
              color:'#516B91',
              
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,3.3],
              markPoint: {
                  data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                  ]
              },
              markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ]
              }
          },
          {
              name: '降水量',
              type: 'bar',
              color:'#59C4E6',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,2.3],
              markPoint: {
                  data: [
                      {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
                      {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                  ]
              },
              markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ]
              }
          }
      ]

或者这样也行
      bzt(){
        let myChart = this.$echarts.init(document.getElementById('bzt'))
        let  option1 = {
            title: {
                text: '用户投资类型',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['基金', '股票', '债券', '储蓄', '期货']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '基金'},
                        {value: 310, name: '股票'},
                        {value: 234, name: '债券'},
                        {value: 135, name: '储蓄'},
                        {value: 1548, name: '期货'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option1)
  
      },
          });
      },