vue使用实例 
<template>    <div style="width:100%;height:100%;" id="productStructureChart"></div></template>

<script>    import echarts from 'echarts';    export default {        name: 'productStructureChart',        data () {            return {                //            };        },        mounted () {            this.$nextTick(() => {                let visiteVolume = echarts.init(document.getElementById('productStructureChart'));                let xAxisData = [];                let data1 = [];                let data2 = [];                for (let i = 0; i < 20; i++) {                    xAxisData.push('类目' + i);                    data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);                    data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);                }                var colors = ['#5793f3', '#d14a61', '#675bba'];

                const option = {                    title : {                        // text: '某站点用户访问来源',                        // subtext: '纯属虚构',                        x:'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:'设备配件'}                            ],                            itemStyle: {                                emphasis: {                                    shadowBlur: 10,                                    shadowOffsetX: 0,                                    shadowColor: 'rgba(0, 0, 0, 0.5)'                                }                            }                        }                    ]                };

                visiteVolume.setOption(option);

                window.addEventListener('resize', function () {                    visiteVolume.resize();                });            });        }    };</script>
 
坐标轴间距 
grid: {    left: 90,    //Y轴距离左边的距离    right:60     //X轴距离右边的距离},
 
样式设置 
yAxis: {    type: 'value',    axisLine: {        color:'blur',     //        lineStyle: {            type: 'solid',            color: 'red',//y轴的颜色            width:'11'//y坐标轴线的宽度        }    },    axisLabel: {        textStyle: {            color: 'red',//y坐标轴的刻度值的颜色

        }    },    splitLine: {   分割线的颜色、类型：虚线和实线        show: true,        lineStyle:{            color:'#3e4555',            type:'solid'        }    }

},

折线的颜色
series: [    {        name:'上周',        type:'line',        stack: '总量',        itemStyle : {            normal : {                color:'#025f64',  //图例的icon图标颜色                lineStyle:{                    color:'#05b0c2'    //折线的颜色                }            }        },        data:[120, 132, 101, 134, 90, 230, 210]    }]

图例的字体颜色

legend: {    data:['上周','当周'],    textStyle: {        color: '#a6bbcc'    }},

右上角的工具栏

toolbox: {    feature: {        saveAsImage: {            show: true,                         //是否显示该工具。            type:"png",                         //保存的图片格式。支持 'png' 和 'jpeg'。            name:"pic1",                        //保存的文件名称，默认使用 title.text 作为名称            backgroundColor:"#ffffff",        //保存的图片背景色，默认使用 backgroundColor，如果backgroundColor不存在的话会取白色            title:"保存为图片",            pixelRatio:1        }    },
    iconStyle:{        color:'#fff',        normal:{            color:'#fff',//背景颜色            borderColor: 'red'//边框颜色

        }    }

},
图例legend

legend: {    orient: 'horizontal',     // horizontal-->水平     vertical-->垂直    x: 'center',     //X轴居中    y: 'top',    data:['细纱挡车','细纱挂纱','细纱换纱','细纱摆管','细纱落纱'],    textStyle:{        color:'#a7b9cd'    }},
刻度大小

min: 0,max: 25000,interval: 5000,
yAxis: [    {        type: 'value',        name: '锭速',        min: 0,        max: 25000,        interval: 5000,   //刻度间隔        axisLabel: {            formatter: '{value} m/min'        },        axisLine: {            lineStyle: {                type: 'solid',                color: '#fff',//左边线的颜色                width:'1'//坐标线的宽度            }        },splitLine: {            show: true,            lineStyle:{                color:'#3e4555',                type:'solid'            }        },    },
]
坐标轴指示器 
tooltip: {    trigger: 'axis',    axisPointer: {        type: 'cross',        crossStyle: {            color: '#999'        }    }},

图表距离两侧的距离 
grid: {  x: 90,  x2: 66,  y2: 40},

双折线图叠加的问题

series: [    {        name:'当周',        type:'line',        // stack: '总量',    //y轴的值会叠加，注释掉就不会叠加了        itemStyle : {            normal : {                color:'#03c4d5',                lineStyle:{                    color:'#05b0c2'                }            }        },        data:[20857.84168, 21159.75663, 21590.5474, 22968.84356, 0, 0, 0]    },    {        name:'上周',        type:'line',        // stack: '总量',     //y轴的值会叠加，注释掉就不会叠加了        itemStyle : {            normal : {                color:'#025f64',                lineStyle:{                    color:'#005d65'                }            }        },        data:[20172.67505, 21714.04182, 11356.07937, 22980.75812, 22908.63532, 22373.94958, 22366.32426]    },
双y轴时，各图表参照的y轴设置（yAxisIndex），从0开始 
series: [    {        name:'锭速',        type:'line',        data:this.spindleSpeed,        yAxisIndex: 0,    //0代表左边的y轴        axisLine: {            lineStyle: {                type: 'solid',                color: '#fff',//左边线的颜色                width:'1'//坐标线的宽度            }        },        splitLine: {            show: true,            lineStyle:{                color:'red',                type:'solid'            }        },        itemStyle : {            normal : {                color:'#01C4D6',                lineStyle:{                    color:'#01C4D6'                }            }        },    },    {        name:'定长',        type:'bar',        yAxisIndex: 1,  //1代表右边的y轴        data:this.spindleLength,        itemStyle : {            normal : {                color:'#C23531',                lineStyle:{                    color:'#C23531'                }            }        },    }]

转载于:https://www.cnblogs.com/web-zqk/p/11091155.html

echarts 样式 配置 vue相关推荐

  1. webpack配置vue组件加载器

    前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...

  2. vue 一个页面多个router-view如何配置子路由_前端开发：如何安装配置Vue路由？

    大家好,我来了!本期为大家带来的Web前端学习知识是"前端开发:如何安装配置Vue路由?",喜欢Web前端的小伙伴,一起看看吧! Vue Router 是 Vue.js 官方的路由 ...

  3. 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离

    一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

  4. echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载

    导语 近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...

  5. Vue-cli 4.x 中的全局样式配置

    在Vue-cli 4.x 中配置样式 在使用vue-cli 4.x搭建项目完毕后,你可以选择在项目目录下创建"style"文件夹,在里面创建scss文件来作为全局可用的样式文件. ...

  6. vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性

    vue.Steps 步骤条.Steps 属性.vue Steps 所有步骤条样式.vue Steps 步骤条全部属性 设计规则 何时使用 代码演示 1.基本用法 2.迷你版 3.带图标的步骤条 4.步 ...

  7. 【vscode软件安装配置vue】

    vscode软件安装配置vue vscode设置成中文 识别.vue文件 右键.html文件Open With Live Server html代码自动补全 vscode用户设置 vscode设置成中 ...

  8. echarts主题配置

    原文地址:Liang的博客 前言 ECharts 是我们在项目中经常使用的数据可视化插件,默认的主题样式基本能满足我们的需求,奈何公司的 UI 小妹妹是一个极其负责的讲究人,对颜色样式的追求是极致的 ...

  9. Vue：Vue和ECharts，在Vue上进行可视化处理，在Vue上画图

    Vue:Vue和ECharts,在Vue上进行可视化处理,在Vue上画图 一.预科知识 Vue CLI ECharts 二.资源 在Vue中使用echarts 如何在 Vue 项目中使用 echart ...

最新文章

  1. setactive隐藏之后无法显示_WPS表格：如何显示和隐藏顶部工具栏？
  2. 根据ip地址获得天气预报
  3. IXDC 2018 | 打动人心的互联网保险设计
  4. c语言uint32_使C语言实现面向对象的三个要素，你掌握了吗？
  5. PX4编译文件 Makefile 剖析
  6. 小程序自定义tabbar custom-tab-bar 6s出不来解决方案，cover-view不兼容
  7. linux下防火墙基础知识之iptables
  8. Python 实现定时任务的八种方案
  9. iView admin网站后台管理系统模板v2.5.0
  10. javascript打飞机程序8x8x飞机大战
  11. linaro交叉编译linux内核,Ubuntu14.04（64位）下gcc-linaro-arm-linux-gnueabihf交叉编译环境搭建...
  12. 百度，阿里，搜狐公司社招面试题及总结
  13. 踩坑前端框架 - iview DatePicker 时间选择年月日时分秒
  14. linux串口工具 kermit,ubuntu串口工具(minicom、kermit)的使用
  15. 盘点中美自动驾驶卡车领域公司， 先进的技术和落地的场景
  16. 虚拟同步发电机_一种基于下垂控制和增加虚拟阻抗的逆变器并联仿真实现
  17. 汉诺塔问题的递归和非递归算法
  18. jQuery之图片显示篇A
  19. PCA分析（主成分分析）--结果解读
  20. 徐志摩《再别康桥》赏析

热门文章

  1. 单例设计模式八种方式——5) 懒汉式(线程安全，同步代码块) 6) 双重检查 7) 静态内部类 8) 枚举
  2. java知识点8——垃圾回收原理和算法、通用的分代垃圾回收机制、 JVM调优和Full GC、开发中容易造成内存泄露的操作
  3. Unity学习笔记4 更换编辑器为VS2013及VS的背景图片设置
  4. leetcode C++ 46. 全排列 给定一个 没有重复 数字的序列，返回其所有可能的全排列。
  5. [YTU]_2769( 结构体--成绩统计)
  6. 轻松删除git本地创建的仓库
  7. 讲讲排序（C++描述）
  8. Java爬虫https网页内容报错SSLHandshakeException信任（忽略）所有SSL证书
  9. [ Linux ] [ OS ] [ memory ] Linux 如何查看系統硬體的記憶體(RAM)資訊
  10. 怎么把本地的项目同时提交到两个仓库