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的样式

 

代码：

　　

 1 color:['#78d528','#fa7371'], //分别定义第一个legend和第二个legend的icon颜色
 2         legend: {
 3           data:[
 4             {
 5               name:"舒张压",
 6               textStyle: {
 7                 color:'#78d528' //定义 legend 的字体颜色
 8               }
 9             },{
10               name: "收缩压",
11               textStyle: {
12                 color:'#fa7371' //定义 legend 的字体颜色
13               }
14             }
15           ]
16         },

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
            ]
          },
posted @ 2019-12-17 20:36  php+人工智障  阅读(1436)  评论(0)    收藏  举报