Shulou(Shulou.com)06/01 Report--

This article mainly introduces vue+echart how to achieve smooth line chart related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this vue+echart how to achieve smooth line chart article will have a harvest, let's take a look at it.

Effect picture:

Installation dependencies:

Npm install echarts-save import echarts from "echarts"

Complete code:

Export default {data () {return {option: {text: "trend chart", / / title setting "participation status" / / subtext: "fictional", left: "center", / / title location}, tooltip: {/ / mouse hover override prompt box trigger: "axis" / / coordinate line prompt / / trigger: "item", / / according to item prompt message / / formatter: "{b}: {c}", / / prompt content axisPointer: {type: "cross", label: {backgroundColor: "# 6a7985",} Legend: {bottom: "5%", data: ["first item", "second item"],}, xAxis: {axisTick: {show: false, / / do not show axis tick lines}, axisLine: {show: false, / / do not show axis lines} Type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], boundaryGap: false, / / No gap with x axis}, yAxis: {axisTick: {show: false, / / No axis tick marks} AxisLine: {show: false, / / No axis}, type: "value", / / splitLine: {/ / show: false, / / No gridlines / /},}, grid: {left: "5%", right: "5%" Bottom: "20%", containLabel: true,}, series: [{name: "first item", / / set name No correlation with data hoverAnimation: true, / / mouse hover effect The default is true data: [{value: 335, name: "device 1"}, {value: 335, name: "device 1"}, {value: 310, name: "device 2"}, {value: 234, name: "device 3"}, {value: 135, name: "device 4"} {value: 1548, name: "device 5"}, {value: 1548, name: "device 4"}, {value: 1548, name: "device 5"},], type: "line", / / region has background areaStyle: {/ / color: "# 1ADA6F" }, smooth: true,}, {name: "second item", data: [220,222,333,222,444,222,444], type: "line", areaStyle: {}, smooth: true,} }, mounted () {/ / this method cannot be placed in the greated lifecycle because dom has not yet initialized this.echarts ();}, methods: {echarts () {/ / introduce ECharts main module var echarts = require ("echarts/lib/echarts"); / / introduce bar chart (this example can be removed) require ("echarts/lib/chart/bar") / / introduce prompt box and title component require ("echarts/lib/component/tooltip"); require ("echarts/lib/component/title"); / / initialize echarts instance var myChart1 = echarts.init (document.getElementById ("demo")) based on the prepared echarts; / / draw pie chart myChart1.setOption (this.option); / / draw line chart},},} # demo {width: 500px; height: 300px;} this is the end of the article on "how to achieve a smooth line chart in vue+echart". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve smooth broken line map in vue+echart". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.