vue 使用 echart ，自定義樣式案例

1、vue 安裝 echart 庫

npm install echarts --save

2、vue代碼

引入

let echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/line");
// 以下的組件按需引入
require("echarts/lib/component/tooltip"); // tooltip組件
require("echarts/lib/component/title"); //  title組件
require("echarts/lib/component/legend"); // legend組件

　　html 代碼

<div id="myChart" style="width: 725px;height: 300px"></div>

　　js代碼

 mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
      // 基於准備好的dom，初始化echarts實例
      let myChart = echarts.init(document.getElementById('myChart'));
      // 繪制圖表
      myChart.setOption({
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        color:['#78d528','#fa7371'],
        legend: {
          data:[
            {
              name:"舒張壓",
              textStyle: {
                color:'#78d528'
              }
            },{
              name: "收縮壓",
              textStyle: {
                color:'#fa7371'
              }
            }
          ]
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis:  {
          type: 'category',
          boundaryGap: false,
          data: [

            '07:00',
            '08:00',
            '09:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            ]
        },
        yAxis: {
          type: 'value',
            splitLine: {
              show: true,
              lineStyle:{
                type:'dashed'
              }
              },
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: [
          {
            name:'舒張壓',
            type:'line',
            stack: '總量',
            lineStyle:{
              normal:{
                color:'#78d528'
              }
            },
            data:[
              120,
              132,
              101,
              134,
              12,
              45,
              56,
              34,
              76,
              134,
              90,
              230,
              210
            ]
          },
          {
            name:'收縮壓',
            type:'line',
            lineStyle:{
              normal:{
                color:'#fa7371'
              }
            },
            stack: '總量',
            data:[
              55,
              32,
              11,
              32,
              12,
              45,
              56,
              34,
              76,
              134,
              90,
              43,
              54
            ]
          },
        ]
      });
    },
}

　整體效果：

 

 

3、重點來了-定義樣式

虛線：

 

yAxis: {
          type: 'value',
      /********定義樣式開始********/
            splitLine: {
              show: true,
              lineStyle:{
                type:'dashed' //定義樣式=虛線
              }
              },
    /********結束********/
          axisLabel: {
            formatter: '{value}'
          }
        },    

　　4、改變legend的樣式

 

代碼：

　　

color:['#78d528','#fa7371'], //分別定義第一個legend和第二個legend的icon顏色
        legend: {
          data:[
            {
              name:"舒張壓",
              textStyle: {
                color:'#78d528' //定義 legend 的字體顏色
              }
            },{
              name: "收縮壓",
              textStyle: {
                color:'#fa7371' //定義 legend 的字體顏色
              }
            }
          ]
        },

5、定義x軸線條的顏色

 

series: [
          {
            name:'舒張壓',
            type:'line',
            stack: '總量',
            lineStyle:{
              normal:{
                color:'#78d528' //線條顏色
              }
            },
//數據
            data:[
              120,
              132,
              101,
              134,
              12,
              45,
              56,
              34,
              76,
              134,
              90,
              230,
              210
            ]
          },
          {
            name:'收縮壓',
            type:'line',
            lineStyle:{
              normal:{
                color:'#fa7371'//線條顏色
              }
            },
            stack: '總量',
//數據
            data:[
              55,
              32,
              11,
              32,
              12,
              45,
              56,
              34,
              76,
              134,
              90,
              43,
              54
            ]
          },