echarts合集/vue 使用echarts出现 option报错 图表无法显示/圆环默认选中一项/移入数据显示在中心/折线图绘制光滑曲线

vue 使用echarts出现 option报错 图表无法显示

1. 确认安装 npm install echarts -S
2. main.js引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts Vue.use(echarts)
3. helloworld.vue import echarts from 'echarts';

注意this.$echarts.init(this.$refs.bar); option报错改为let option就好了

	Axios.get('static/json/testbar.json').then((response)=>{
	   // 基于准备好的dom，初始化echarts实例
	   let myChart = this.$echarts.init(this.$refs.bar);
	    let option = {
	   };
	   // 使用刚指定的配置项和数据显示图表。
	   myChart.setOption(option);
	   return false;//只此一句
	 }).catch((error)=>{
	   console.log(error);
	 })

饼图 圆环图默认选中一项数据/移入时数据显示value在中心

1. 默认选中一项数据 在setOption后面加入代码 饼图会默认选中一项 移出也会选中最后停留的数据上

 myChart.setOption(option, true);
            myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});//设置默认选中高亮部分

            myChart.on('mouseover',function(e){

                if(e.dataIndex != index){

                    myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index  });

                }

            });

            myChart.on('mouseout',function(e){

                index = e.dataIndex;

                myChart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});

            });

2. 饼图圆环图移入时数据显示value在中心

emphasis: {
       label: {
           position: 'center',
           show : true,
           formatter: "{b}{c}"
       }
   },
   label: {
       normal: {
           position: 'center',
           show : false
       }
   }

折线图绘制光滑曲线

smooth属性

"data":[
      {
        "name":"指标a",
        "type":"line",
        "stack": "总量",
        "smooth":true,//当为true时，即为光滑的曲线（默认为true）；当为false，即为折线。
        "data":[116, 129, 135, 86, 73, 85, 73,68,92,130,245,139,115,111]
      },{
        "name":"指标b",
        "type":"line",
        "stack": "总量",
        "smooth":true,//当为true时，即为光滑的曲线（默认为true）；当为false，即为折线。
        "data":[116, 129, 135, 86, 73, 85, 73,68,92,130,245,139,115,111]
      },{
        "name":"指标c",
        "type":"line",
        "stack": "总量",
        "smooth":true,//当为true时，即为光滑的曲线（默认为true）；当为false，即为折线。
        "data":[116, 129, 135, 86, 73, 85, 73,68,92,130,245,139,115,111]
      }，{
        "name":"指标d",
        "type":"line",
        "stack": "总量",
        "smooth":true,//当为true时，即为光滑的曲线（默认为true）；当为false，即为折线。
        "data":[116, 129, 135, 86, 73, 85, 73,68,92,130,245,139,115,111]
      }
    ]